<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <script src="../../../static/js/vue.js"></script>
    <script src="../../../static/js/config.js"></script>
    <link rel="stylesheet" href="../../../static/layui/css/layui.css"></link>
    <script src="../../../static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="app">
    <table class="layui-hide" id="table" lay-filter="table"></table>
    <div id="page"></div>
    <script type="text/html" id="toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <button type="button" class="layui-btn" @click="addBook">addBook</button>
</div>
<script src="../../../static/layui/layui.js"></script>
<script src="../../../static/js/store.js"></script>
<script>
    layui.use(['table','laypage'], function(){
        var table = layui.table;
        var laypage = layui.laypage;

        table.render({
            elem: '#table',
            url:'',
            cellMinWidth: 80,
            cols: [[
                {field:'name', width:80, title: '书名'},
                {field:'author', width:80, title: '作者'},
                {field:'price', width:80, title: '价格'},
                {field:'status', title: '状态'},
                {fixed: 'right', width:200, align:'center', toolbar: '#toolbar'}
            ]],
            limit: 5,
            data: []
        });
        table.on('tool(table)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看

            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        })
        window.reloadTable = function(pageNum,pageSize) {
            apiConfig.findPageBookApi({pageNum:pageNum,pageSize:pageSize}).then(function (result) {
                if(methodConfig.requestMethod(result)){
                    table.reload('table',{
                        limit: pageSize,
                        data: result.data.content
                    })
                    vm.$data.curr = pageNum
                    vm.$data.limit = pageSize
                    fenye(result.data.totalElements,result.data.pageable.pageSize,pageNum)
                }
            })
        }
        function fenye(count,limit,curr){
            laypage.render({
                elem: 'page',
                layout: ['prev', 'page', 'next','limit','skip'],
                curr: curr,
                count: count,
                limit: limit,
                limits: [5,10,15,20],
                jump: function (obj,first) {
                    if(!first){
                        reloadTable(obj.curr,obj.limit)
                    }
                }
            });
        }
        reloadTable(1,5)
    });
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            curr: 0,
            limit: 0
        },
        methods:{
            addBook:function () {
                // window.location.href=webConfig.addBookHtml
                layer.open({
                    type: 2,
                    title: false,
                    shade: [0],
                    area: ['550px', '300px'],
                    offset: 'auto', //右下角弹出
                    time: 0, //2秒后自动关闭
                    anim: 2,
                    content: [`${webConfig.addBookHtml}`, 'no'], //iframe的url，no代表不显示滚动条
                    end: function(){ //此处用于演示
                        reloadTable(vm.$data.curr,vm.$data.limit)
                    }
                });
            }
        }
    })
</script>
</body>
</html>